<template>
  <div class="projectAssess">
    <div class="headerTitle">
      <span>赋能中心</span>
      <span>
        <el-rate v-model="project1"></el-rate>
      </span>
    </div>

    <!-- 备注 -->
    <div class="remarks">
      <span>备注</span>
      <p>添加其他企业测评</p>
    </div>

    <div class="personAssess">
      <ul>
        <li v-for="(item, index) in 1" :key="index">
          <span>张三</span>
          <span>产品经理</span>
          <span>
            <el-rate v-model="project1"></el-rate>
          </span>
        </li>
      </ul>
    </div>

    <div class="connectAb">
      <span>沟通能力</span>
      <span>
        <el-rate></el-rate>
      </span>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      project1: 3,
    };
  }
};
</script>

<style scoped>
.projectAssess {
  width: 90%;
  margin: 20px auto;
  font-size: 14px;
}
.projectAssess .headerTitle {
  display: flex;
}
.projectAssess .headerTitle > :nth-child(n) {
  flex: 1;
}
.projectAssess .headerTitle > :nth-child(2) {
  text-align: right;
}
.remarks {
  margin-top: 30px;
}
.remarks span {
  line-height: 30px;
}
.remarks p {
  color: #aaa;
}
.personAssess {
  margin-top: 50px;
}
.personAssess ul li {
  display: flex;
  line-height: 50px;
  height: 50px;
}
.personAssess ul li > :nth-child(1) {
  flex: 1;
}
.personAssess ul li > :nth-child(2) {
  flex: 1;
}
.personAssess ul li > :nth-child(3) {
  width: 130px;
}
.personAssess ul li > :nth-child(3) .el-rate {
    line-height: 60px;
}
.connectAb {
  height: 50px;
  line-height: 50px;
  display: flex;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee; 
}
.connectAb span {
  flex: 1;
}
.connectAb>:nth-child(2) {
  text-align: right;
}
.connectAb>:nth-child(2) .el-rate {
  line-height: 60px;
}
</style>
